<template>
  <div>
    <div class="row">
      <div
        class="q-pa-sm"
        v-for="(item, index) in items"
        :key = index
        :class = "itemClass"
      >
        <!--  :item="item"传递给父组件      -->
        <slot name="item" :item="item" :index="index"></slot>
      </div>
    </div>
    <div class="q-mt-sm">
      <slot name="pagination"></slot>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, toRefs } from 'vue'

export default defineComponent({
  name: 'AmyCard',
  props: {
    items: {
      type: Array,
      required: true
    },

    itemClass: {
      type: String,
      required: false,
      default: 'col-12'
    }
  },

  setup (props, context) {
    const {
      items,
      itemClass
    } = toRefs(props);

    return {
      items,
      itemClass
    };
  }
});
</script>

<!--不能加scope,因为都是全局变量.q-->
<style lang="scss">
.cc-design-page{
  .q-field{
    &--dense{
      .q-field__control, .q-field__marginal{
        height: 28px !important;
      }
    }
  }
}
</style>
